<template>
	<view class="list">
		<view :id="'good'+item.id" class="item" v-for="item in list" :key="item.id" @click="goDesc(item.id)">
			<view class="head_icon" :style="`background-image: url(${item.pic})`"></view>
			<view class="info">
				<view class="info-name">{{item.nicname}}</view>
				<view class="info-menu">
					<view :class="['menu-item',{man:item.sex=='男'}]">{{item.sex?item.sex:''}}
						{{item.age?item.age+'岁':''}}
					</view>
					<view class="menu-item" v-if="item.height">{{item.height?item.height+'cm':''}}</view>
					<view class="menu-item" v-if="item.weight">{{item.weight?item.weight+'kg':''}}</view>
					<view class="menu-item" v-if="item.marry">{{item.marry}}</view>
				</view>
				<view class="info-intro">
					{{`${item.income?item.income+' | ':''}${item.house?item.house+' | ':''}${item.huji?'户籍地：'+item.huji.split(' ')[0]:''}`}}
				</view>
			</view>
			<view class="address" v-if="item.address">
				<view class="icon"></view>
				<view>{{item.address.split(' ')[0]}}</view>
			</view>
			<!-- <image class="good-img" :src="item.goodImg" mode="widthFix" />
			<view class="flex-item">
				<view class="good-name">{{item.goodName}}</view>
				<text class="good-price">{{item.goodPrice}} 元</text>
				<text class="good-sold">已售{{item.goodSold}}件</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			goDesc(id) {
				uni.navigateTo({
					url: `../desc/desc?id=${id}`,
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		background-color: #fff;

		.item {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 10upx 26upx;

			.head_icon {
				width: 120upx;
				height: 120upx;
				background-repeat: no-repeat;
				background-size: cover;
				margin-right: 24upx;
			}

			.info {
				padding: 10upx 0upx;
				flex: 1;
				margin-right: 84upx;

				.info-name {
					margin-bottom: 8upx;
					font-size: 32upx;
					line-height: 38upx;
					color: #333
				}

				.info-menu {
					margin-bottom: 8upx;
					display: flex;
					align-items: center;

					.menu-item {
						width: 80upx;
						margin-right: 10upx;
						font-size: 20upx;
						line-height: 32upx;
						color: #fff;
						text-align: center;
						border-radius: 16upx;


						&:last-child {
							margin-right: 0;
						}

						&:nth-child(1) {
							background-color: #E85E93;

							&.man {
								background-color: #57B0FF;
							}
						}

						&:nth-child(2) {
							background-color: #C45DE8;
						}

						&:nth-child(3) {
							background-color: #4097E3;
						}

						&:nth-child(4) {
							background-color: #FDB765;
						}
					}
				}

				.info-intro {
					color: #999;
					font-size: 20upx;
					line-height: 26upx;
				}
			}

			.address {
				position: absolute;
				top: 24upx;
				right: 26upx;
				padding: 0upx 20upx;
				display: flex;
				align-items: center;
				min-width: 120upx;
				height: 40upx;
				box-sizing: border-box;
				background-color: #E6E4E4;
				font-size: 20upx;
				color: #666;
				line-height: 20upx;
				border-radius: 20upx;

				.icon {
					width: 24upx;
					height: 26upx;
					margin-right: 10upx;
					background-repeat: no-repeat;
					background-size: cover;
					background-image: url('../../../static/icon/address_icon.png');
				}
			}
		}

		// .item {
		// 	display: flex;
		// 	align-items: center;
		// 	padding: 20upx;

		// 	.good-img {
		// 		width: 160upx;
		// 		height: 160upx;
		// 		margin-right: 20rpx;
		// 	}

		// 	.flex-item {
		// 		flex: 1;

		// 		.good-name {
		// 			font-size: 26upx;
		// 			line-height: 40upx;
		// 			height: 80upx;
		// 			margin-bottom: 20upx;
		// 			overflow: hidden;
		// 		}

		// 		.good-price {
		// 			font-size: 26upx;
		// 			color: red;
		// 		}

		// 		.good-sold {
		// 			font-size: 24upx;
		// 			margin-left: 16upx;
		// 			color: gray;
		// 		}

		// 	}
		// }
	}
</style>
